<template>
  <div style="font-size:12px">
    <el-row :gutter="20" align="middle">
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <p>工单统计时间</p>
          <p>更新时间：{{ now }}</p>
        </div>
      </el-col>
      <el-col :span="2">
        <div class="grid-content bg-purple" style="text-align: center">
          <p>工单总数</p>
          <strong>{{ recordNum }}</strong>
        </div>
      </el-col>
      <el-col :span="3">
        <div class="grid-content bg-purple" style="text-align: center">
          <br/>
          <el-tag type="danger">待分配：{{ repairs0 }}</el-tag>
        </div>
      </el-col>
      <el-col :span="3">
        <div class="grid-content bg-purple" style="text-align: center">
          <br/>
          <el-tag size="big" type="info">待接单：{{ repairs1 }}</el-tag>
        </div>
      </el-col>
      <el-col :span="3">
        <div class="grid-content bg-purple" style="text-align: center">
          <br/>
          <el-tag type="warning">等待维修：{{ repairs2 }}</el-tag>
        </div>
      </el-col>
      <el-col :span="3">
        <div class="grid-content bg-purple" style="text-align: center">
          <br/>
          <el-tag type="success">已完成：{{ repairs3 }}</el-tag>
        </div>
      </el-col>
      <el-col :span="3">
        <div class="grid-content bg-purple" style="text-align: center">
          <br/>
          <el-tag type="info">已取消：{{ repairs4 }}</el-tag>
        </div>
      </el-col>
      <el-col :span="3">
        <div class="grid-content bg-purple" style="text-align: center">
          <br/>
          <el-tag>待评价：{{ repairs5 }}</el-tag>
        </div>
      </el-col>
    </el-row>
    工单编号：
    <el-input
        size="mini"
        v-model="repairsRecordVo.repNumWord"
        placeholder="请输入内容"
        style="width:100px"
    ></el-input>&nbsp;
    报修人：
    <el-input
        size="mini"
        v-model="repairsRecordVo.personWord"
        placeholder="请输入姓名"
        style="width:100px"
    ></el-input>&nbsp;维修人：
    <el-input size="mini" v-model="repairsRecordVo.mtWord" placeholder="请输入姓名" style="width:100px"></el-input>&nbsp;工单开始时间：
    <el-date-picker
        size="mini"
        value-format="yyyy-MM-dd HH:mm:ss"
        v-model="repairsRecordVo.startTime"
        type="date"
        placeholder="开始日期"
        style="width:150px"
    ></el-date-picker>&nbsp;到&nbsp;
    <el-date-picker
        size="mini"
        value-format="yyyy-MM-dd HH:mm:ss"
        v-model="repairsRecordVo.endTime"
        type="date"
        style="width:150px"
        placeholder="结束日期"
    ></el-date-picker>&nbsp;工单状态：
    <el-select
        size="mini"
        v-model="repairsRecordVo.repStatus"
        placeholder="请选择"
        style="width:100px"
    >
      <el-option key label="请选择" value></el-option>
      <el-option key="0" label="待分配" value="0"></el-option>
      <el-option key="1" label="待接单" value="1"></el-option>
      <el-option key="2" label="等待维修" value="2"></el-option>
      <el-option key="3" label="已完成" value="3"></el-option>
      <el-option key="4" label="已取消" value="4"></el-option>
      <el-option key="5" label="待评价" value="5"></el-option>
    </el-select>&emsp;
    <el-button
        icon="el-icon-refresh-right"
        slot="trigger"
        size="mini"
        type="info"
        @click="clearQueryData()"
    >重置
    </el-button>
    <el-button
        icon="el-icon-check"
        slot="trigger"
        size="mini"
        type="primary"
        @click="creatQueryTable()"
    >确定
    </el-button>
    <el-button
        icon="el-icon-download"
        slot="trigger"
        size="mini"
        type="success"
        @click="download()"
    >导出
    </el-button>
    <p></p>
    <el-table
        v-loading="loading"
        :data="repairsRecordVo.pageBean.data"
        style="width: 100%"
        highlight-current-row
        border
    >
      <el-table-column align="center" type="index" label="序号" width="50px"/>
      <el-table-column align="center" prop="repNum" label="工单编号" width="200px"/>
      <el-table-column align="center" label="工单状态" width="100px">
        <template slot-scope="scope">
          <el-tag type="danger" v-if="scope.row.repStatus == 0">待分配</el-tag>
          <el-tag type="info" v-else-if="scope.row.repStatus == 1">待接单</el-tag>
          <el-tag type="warning" v-else-if="scope.row.repStatus == 2">等待维修</el-tag>
          <el-tag type="success" v-else-if="scope.row.repStatus == 3">已完成</el-tag>
          <el-tag type="info" v-else-if="scope.row.repStatus == 4">已取消</el-tag>
          <el-tag type v-else-if="scope.row.repStatus == 5">待评价</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="repType" label="工单类别" width="150px"/>
      <el-table-column align="center" prop="person" label="报修人" width="80px">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>姓名: {{ scope.row.person }}</p>
            <p>电话: {{ scope.row.pePhone }}</p>
            <p>报修描述: {{ scope.row.repDesc }}</p>
            <div slot="reference" class="name-wrapper">
              {{ scope.row.person }}
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="repPlace" label="报修位置" width="150px"/>
      <el-table-column align="center" prop="repTime" label="报修时间" width="170px"/>
      <el-table-column align="center" prop="sendPerson" label="派单人" width="80px"/>
      <el-table-column align="center" prop="maintenance" label="维修人" width="80px">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top" v-if="scope.row.repStatus==3">
            <p>评价: {{ scope.row.repAppraise }}</p>
            <p>评分: {{ scope.row.repScore }}</p>
            <div slot="reference" class="name-wrapper">
              {{ scope.row.maintenance }}
            </div>
          </el-popover>
          <div v-else>{{ scope.row.maintenance }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="mtPhone" label="维修人联系方式" width="150px"/>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <div v-if="scope.row.repStatus == 0 || scope.row.repStatus == 1 ||scope.row.repStatus == 2 ">
            <el-button size="mini" type="primary" @click="sendOrder(scope.$index, scope.row)">
              <span v-if="scope.row.maintenance != null">改派</span>
              <span v-else>派单</span>
            </el-button>
            <el-button size="mini" type="warning" @click="repComplete(scope.$index, scope.row)" v-if="scope.row.repStatus == 2">
              <span>维修完成</span>
            </el-button>
          </div>
          <el-tag type="success" v-else-if="scope.row.repStatus == 3">已完成</el-tag>
          <el-tag type="info" v-else-if="scope.row.repStatus == 4">已取消</el-tag>
          <el-tag type v-else-if="scope.row.repStatus == 5">待评价</el-tag>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="repairsRecordVo.pageBean.currPage"
        :page-sizes="pageSizes"
        :page-size="repairsRecordVo.pageBean.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="repairsRecordVo.pageBean.totalNum"
    ></el-pagination>

    <el-dialog title="派单" :visible.sync="dialogFormVisible" width="30%">
      <el-form :model="maintenanceVo">
        <el-form-item label="维修人员名字" label-width="140px">
          <el-input v-model="maintenanceVo.maintenance" style="width:200px"></el-input>
        </el-form-item>
        <el-form-item label="维修人员联系电话" label-width="140px">
          <el-input v-model="maintenanceVo.mtPhone" style="width:200px"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="alterOrder()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loading: true,
      pageSizes: [5, 10, 20, 50],
      repairsRecordVo: {
        repNumWord: "",
        personWord: "",
        startTime: "",
        endTime: "",
        mtWord: "",
        repStatus: "",
        pageBean: {
          currPage: 1,
          pageSize: 10,
          totalNum: 0,
          data: [],
        },
      },
      now: "",
      recordNum: 0,
      repairs0: 0,
      repairs1: 0,
      repairs2: 0,
      repairs3: 0,
      repairs4: 0,
      repairs5: 0,
      maintenanceVo: {
        repairsId: "",
        maintenance: "",
        mtPhone: "",
      },
      dialogFormVisible: false,
      alterIndex: "",
    };
  },
  created() {
    this.updateTime();
    this.crateTable();
    this.getRepairInfo();
  },
  methods: {
    handleSizeChange(val) {
      this.repairsRecordVo.pageBean.pageSize = val;
      this.crateTable();
    },
    handleCurrentChange(val) {
      this.repairsRecordVo.pageBean.currPage = val;
      this.crateTable();
    },
    creatQueryTable() {
      this.repairsRecordVo.pageBean.currPage = 1;
      this.crateTable();
      this.updateTime();
    },
    crateTable() {
      this.$axios.post("/bx/record/list", this.repairsRecordVo).then((r) => {
        this.repairsRecordVo.pageBean.totalNum = r.data.data.totalNum;
        this.repairsRecordVo.pageBean.data = r.data.data.data;
        this.loading = false;
      });
    },
    updateTime() {
      let date = new Date();
      this.now =
          date.getFullYear() +
          "-" +
          (date.getMonth() < 10 ? "0" : "") +
          date.getMonth() +
          "-" +
          (date.getDate() < 10 ? "0" : "") +
          date.getDate() +
          " " +
          (date.getHours() < 10 ? "0" : "") +
          date.getHours() +
          ":" +
          (date.getMinutes() < 10 ? "0" : "") +
          date.getMinutes() +
          ":" +
          (date.getSeconds() < 10 ? "0" : "") +
          date.getSeconds();
    },
    clearQueryData() {
      this.repairsRecordVo = {
        repNumWord: "",
        personWord: "",
        startTime: "",
        endTime: "",
        mtWord: "",
        repStatus: "",
        pageBean: {
          currPage: 1,
          pageSize: 10,
          totalNum: 0,
          data: [],
        },
      };
      this.crateTable();
    },
    download() {
      this.$axios
          .post("/bx/record/download", this.repairsRecordVo, {
            responseType: "blob",
          })
          .then((flow) => {
            if (!flow.data) return;
            const blob = new Blob([flow.data]);
            const blobUrl = window.URL.createObjectURL(blob);
            const a = document.createElement("a");
            a.style.display = "none";
            a.download = "报修记录.xlsx"; // 自定义下载的文件名
            a.href = blobUrl;
            a.click();
          });
    },
    getRepairInfo() {
      this.$axios.post("/bx/record/repairsInfo").then((r) => {
        let sum = 0;
        for (let info of r.data.data) {
          sum += info.count;
          if (info.repStatus == 0) {
            this.repairs0 = info.count;
          } else if (info.repStatus == 1) {
            this.repairs1 = info.count;
          } else if (info.repStatus == 2) {
            this.repairs2 = info.count;
          } else if (info.repStatus == 3) {
            this.repairs3 = info.count;
          } else if (info.repStatus == 4) {
            this.repairs4 = info.count;
          } else if (info.repStatus == 5) {
            this.repairs5 = info.count;
          }
        }
        this.recordNum = sum;
      });
    },
    sendOrder(index, row) {
      this.alterIndex = index;
      this.dialogFormVisible = true;
      this.maintenanceVo = {
        repairsId: "",
        maintenance: "",
        mtPhone: "",
      };
      this.maintenanceVo.repairsId =
          this.repairsRecordVo.pageBean.data[index].id;
      if (row.maintenance != "") {
        this.maintenanceVo.maintenance =
            this.repairsRecordVo.pageBean.data[index].maintenance;
        this.maintenanceVo.mtPhone =
            this.repairsRecordVo.pageBean.data[index].mtPhone;
      }
      this.getRepairInfo();
    },
    alterOrder() {
      this.$axios
          .post("/bx/record/update/maintenance", this.maintenanceVo)
          .then((r) => {
            if (r.data.code == 200) {
              this.$message({
                message: "派单成功",
                type: "success",
              });
              this.dialogFormVisible = false;
              this.repairsRecordVo.pageBean.data[this.alterIndex].maintenance =
                  this.maintenanceVo.maintenance;
              this.repairsRecordVo.pageBean.data[this.alterIndex].mtPhone =
                  this.maintenanceVo.mtPhone;
              this.repairsRecordVo.pageBean.data[this.alterIndex].repStatus = "2";
            }
          });
      this.getRepairInfo();
    },
    repComplete(index, row) {
      this.$axios.post("/bx/record/update/complete?repairsId=" + row.id).then(r => {
        if (r.data.code == 200) {
          this.$message({
            message: "修改成功，等待评价",
            type: "success",
          });
          this.repairsRecordVo.pageBean.data[index].repStatus = "5";
        }
      });
      this.getRepairInfo();
    },
  },
};
</script>

<style>
.el-row {
  margin-bottom: 20px;
  /* & :last-child {
    margin-bottom: 0;
  } */
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #f3f0ff;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  padding: 5px;
  border-radius: 4px;
  min-height: 80px;
  text-align: left;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>